.w100 {
    width: 100%;
}

.h100 {
    height: 100%;
}

.df {
    display: flex;
}

.fd-c {
    flex-direction: column;
}

.jc-c {
    justify-content: center;
}

.fw-w {
    flex-wrap: wrap;
}

.jc-end {
    justify-content: end;
}

.ai-c {
    align-items: center;
}

.jc-sb {
    justify-content: space-between;
}

.f-1 {
    flex: 1;
}

// base
.f-weight {
    font-weight: 700;
}

.f-fs-12 {
    font-size: 1.2rem;
}

.f-fs-14 {
    font-size: 1.4rem;
}

.f-fs-16 {
    font-size: 1.6rem;
}

.f-fs-18 {
    font-size: 1.8rem;
}

.f-fs-20 {
    font-size: 2rem;
}

.f-fs-24 {
    font-size: 2.4rem;
}

.f-fs-26 {
    font-size: 2.6rem;
}

.f-fs-28 {
    font-size: 2.8rem;
}

.f-fs-32 {
    font-size: 3.2rem;
}

.f-fs-36 {
    font-size: 3.6rem;
}

.f-center {
    text-align: center;
}

.f-right {
    text-align: right;
}

.f-am {
    vertical-align: middle;
}

// color

.red {
    color: red;
}

.black {
    color: #2a2a2a;
}

.gray {
    color: gray;
}

.c-f7f7f7 {
    color: #f7f7f7;
}

.white {
    color: #fff;
}

.blue {
    color: #2258f6;
}

.orange {
    color: #e77e00;
}

.c777 {
    color: #777777;
}

.green {
    color: green;
}

.bg-fff {
    background-color: #fff !important;
}
.bg-red {
    background-color: red;
}

.bg-green {
    background-color: green;
}
.bg-c777 {
    background-color: #777777;
}
.bg-c8 {
    background-color: #c8c8c8;
}
.bg-e77 {
    background-color: #e77e00;
}

// margin

.f-mt-10 {
    margin-top: 1rem;
}

.f-mt-20 {
    margin-top: 2rem;
}

.f-ml-20 {
    margin-left: 2rem !important;
}

.f-ml-05 {
    margin-left: 0.5rem;
}

.f-ml-10 {
    margin-left: 1rem;
}

.f-ml-03 {
    margin-left: 0.3rem;
}

.f-mr-20 {
    margin-right: 2rem;
}

.f-mr-10 {
    margin-right: 1rem;
}

.f-mr-05 {
    margin-right: 0.5rem;
}

.f-mb-20 {
    margin-bottom: 2rem;
}

// padding

.f-p-0-10 {
    padding: 0 1rem;
}

.f-p-0-20 {
    padding: 0 2rem;
}

.f-p-20-10 {
    padding: 2rem 1rem;
}

.f-p-0-24 {
    padding: 0 2.4rem;
}

.f-p-0-18 {
    padding: 0 1.8rem;
}

.f-p-10 {
    padding: 1rem;
}

.f-p-20 {
    padding: 2rem;
}

.f-p-10-0 {
    padding: 1rem 0;
}

.f-p-15-0 {
    padding: 1.5rem 0;
}

.f-p-20-0 {
    padding: 2rem 0;
}

.f-p-5-0 {
    padding: 0.5rem 0;
}

.f-pl-10 {
    padding-left: 1rem;
}

.f-l-h {
    line-height: 1.5;
}

.f-pb-10 {
    padding-bottom: 1rem;
}

.f-pb-50 {
    padding-bottom: 5rem;
}

.f-w-400{
    font-weight: 300;
}

.single-line {
    width: 100px;
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    text-overflow: ellipsis;
    /* 用省略号表示溢出部分 */
}

.ellipsis {
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    text-overflow: ellipsis;
    /* 用省略号表示溢出部分 */
}

// 自动换行
.word-w-b {
    word-wrap: break-word;
    word-break: normal;
}

//文字不换行
.nowrap {
    white-space: nowrap;
}

.f-b-b-1 {
    border-bottom: 1px solid #eee;
}

.pointer {
    cursor: pointer;
}

.r {
    border: 1px solid red;
}

.agreement {
    color: #2258f6;
    cursor: pointer;

    &:hover {
        color: #0844f8;
    }
}
